<template>
  <div class="topsearch">
    <el-form ref="elForm" :model="formData" :rules="rules" size="small" label-width="100px">
      <el-row :gutter="20">
        <el-col :span="4">
          <el-row>
            <el-form-item label-width="0" prop="type">
              <el-select v-model="formData.type" placeholder="请选择类型" clearable :style="{width: '100%'}">
                <el-option v-for="(item, index) in couponOptiopn" :key="index" :label="item.title" :value="item.id"
                  :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-row>
        </el-col>
        <el-col :span="4">
          <el-row>
            <el-form-item label-width="0" prop="title">
                <el-input v-model="formData.title" placeholder="请输入标题" clearable :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-row>
        </el-col>
        <el-col :span="4">
          <el-form-item label-width="0" prop="status">
            <el-select v-model="formData.status" placeholder="请选择状态" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in statueOption" :key="index" :label="item.label" :value="item.value"
                :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-row>
            <div class="rightbtn fr">
              <el-button type="primary" icon="el-icon-search" size="small" @click="searchlist">查询</el-button>
              <el-button icon="el-icon-refresh-left" size="small" @click="resetform">重置</el-button>
            </div>
          </el-row>
        </el-col>
      </el-row>
    </el-form>

  </div>
</template>

<script>
  import {getSessionStorage} from '@/utils/accessToken'
  export default {
    data() {
      return {
        formData: {
          type: '',
          status: '',
          title: '',
        },
        rules: {
          type: [{
            required: false,
            message: '请选择类型',
            trigger: 'change'
          }],
          status: [{
            required: false,
            message: '请选择状态',
            trigger: 'change'
          }],
          title: [{
            required: false,
            message: '请输入标题',
            trigger: 'change'
          }],
        },
        couponOptiopn: [],
        statueOption: [{
          "label": "未发布",
          "value": 0
        }, {
          "label": "发布中",
          "value": 1
        },{
        "label": "未开始",
        "value": 2
        },
        {
        "label": "已结束",
        "value": 3
        },{
          "label": "已暂停",
          "value": 4
        },
        {
         "label": "已抢光",
         "value": 5
        }
        ],
      }
    },
    methods:{
      //新增优惠券 打开弹窗
      allcoupon(){
        this.$emit('opendialog')
      },
      //搜索查询
      searchlist(){
        this.$emit('searchlist',this.formData)
        this.$message.success('搜索成功！')
      },
      //重置
      resetform(){
        this.$message.success('重置成功')
        //清空表单
        this.$refs['elForm'].resetFields()
        //刷新列表
        this.$emit('refreshrecord')
      }
    },
    mounted(){
      //获取优惠券类型选项
      this.couponOptiopn = getSessionStorage('Options')[25]
    }
  }
</script>

<style lang='scss' scope>

</style>
